<div id="back-to-top" class="back-to-top">
    <i class="fas fa-rocket"></i>
</div>

<div id="tooltip" class="tooltip" role="tooltip">
    返回顶部
    <div id="arrow" class="tooltip-arrow"></div>
</div>

<style>
.back-to-top {
    position: fixed;
    right: 6%;
    bottom: 20%;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.back-to-top i {
    color: #666;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    transform: rotate(-45deg);
}

/* 悬停效果 */
.back-to-top:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.back-to-top:hover i {
    color: #333;
    animation: rocketShake 1s infinite;
}

/* 火箭抖动动画 */
@keyframes rocketShake {
    0% {
        transform: rotate(-45deg) translate(0, 0);
    }
    50% {
        transform: rotate(-45deg) translate(-2px, -2px);
    }
    100% {
        transform: rotate(-45deg) translate(0, 0);
    }
}

/* 发射动画 */
@keyframes launchRocket {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    30% {
        transform: scale(1.2) translateY(-100px);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5) translateY(-1000px);
        opacity: 0;
    }
}

/* 火箭尾焰 */
.back-to-top::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, #ff6b6b);
    opacity: 0;
    transition: opacity 0.3s;
}

.back-to-top:hover::after {
    opacity: 1;
    animation: flame 0.6s infinite;
}

@keyframes flame {
    0%, 100% {
        height: 20px;
    }
    50% {
        height: 25px;
    }
}

/* 发射状态 */
.back-to-top.launching {
    animation: launchRocket 1.5s ease-out forwards;
    pointer-events: none;
}

.back-to-top.launching::after {
    opacity: 1;
    height: 30px;
    animation: flame 0.2s infinite;
}

.tooltip {
    display: none;
    position: absolute;
    background: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 1001;
}

.tooltip-arrow {
    position: absolute;
    background: #333;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}
</style>

<script>
function initBackToTop() {
    if (!window.FloatingUI) {
        setTimeout(initBackToTop, 100);
        return;
    }

    const backToTop = document.getElementById('back-to-top');
    const tooltip = document.getElementById('tooltip');
    const arrow = document.getElementById('arrow');
    
    const {computePosition, flip, shift, offset, arrow: floatingArrow} = window.FloatingUI;
    
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            backToTop.style.display = 'flex';
        } else {
            backToTop.style.display = 'none';
        }
    });
    
    backToTop.addEventListener('click', function() {
        // 添加发射动画类
        backToTop.classList.add('launching');
        
        // 直接快速滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'auto'  // 改为 'auto' 实现瞬间滚动
        });
        
        // 动画结束后重置
        setTimeout(() => {
            backToTop.classList.remove('launching');
            backToTop.style.display = 'none';
            // 短暂延迟后重新显示新的火箭
            setTimeout(() => {
                if (window.scrollY > 300) {
                    backToTop.style.display = 'flex';
                }
            }, 100);
        }, 1500);  // 与 CSS 动画时间匹配
    });

    backToTop.addEventListener('mouseenter', () => {
        tooltip.style.display = 'block';
        
        computePosition(backToTop, tooltip, {
            placement: 'left',
            middleware: [
                offset(10),
                flip(),
                shift({padding: 5}),
                floatingArrow({element: arrow})
            ],
        }).then(({x, y, placement, middlewareData}) => {
            Object.assign(tooltip.style, {
                left: `${x}px`,
                top: `${y}px`,
            });

            const {x: arrowX, y: arrowY} = middlewareData.arrow;
            const staticSide = {
                left: 'right',
                right: 'left',
                top: 'bottom',
                bottom: 'top',
            }[placement.split('-')[0]];

            Object.assign(arrow.style, {
                left: arrowX != null ? `${arrowX}px` : '',
                top: arrowY != null ? `${arrowY}px` : '',
                right: '',
                bottom: '',
                [staticSide]: '-4px',
            });
        });
    });

    backToTop.addEventListener('mouseleave', () => {
        tooltip.style.display = 'none';
    });
}

document.addEventListener('DOMContentLoaded', initBackToTop);
</script>